$(window).on("load", function () {
  /* 海报轮播图插件ZoomPic */
  function zoomPic() {
    new ZoomPic("jswbox");
  }
  zoomPic();

  /* 今日秒杀倒计时功能 */
  function countDown() {
    // 1. 获取未来日期
    let futureDate = new Date("2077 / 01 / 01 / 00:00:00");
    // 2. 计时器每隔一秒调用一次函数
    let countDownId = setInterval(daojishi, 1000);
    // 3. 打开页面立即执行一次函数
    daojishi();
    function daojishi() {
      // 4. 获取当前日期
      let nowDate = new Date();
      // 5. 获取时间差（单位毫秒）
      let timeDiff = futureDate - nowDate;
      // 6. 根据时间差判断是渲染内容还是关闭计时器
      if (timeDiff >= 0) {
        // 7. 根据时间差获得
        // 时
        let houer = Math.floor((timeDiff / 1000 / 60 / 60) % 24);
        // 分
        let minute = Math.floor((timeDiff / 1000 / 60) % 60);
        // 秒
        let second = Math.floor((timeDiff / 1000) % 60);
        // 8. 判断补0
        if (houer < 10) houer = `0${houer}`;
        if (minute < 10) minute = `0${minute}`;
        if (second < 10) second = `0${second}`;
        // 9. 把获得的时分秒渲染进页面
        $(".countdown").html(`
            <p class="fs24 fw400">乐购.今日秒杀</p>
            <p class="fs16">倒计时</p>
            <span>${houer}</span><span>:</span><span>${minute}</span><span>:</span><span>${second}</span>
      `);
      } else {
        // 10. 关闭计时器
        clearInterval(countDownId);
      }
    }
  }
  countDown();

  /* 今日秒杀商品滚动插件 */
  function xSlider() {
    //默认状态下左右滚动
    $("#s1").xslider({
      unitdisplayed: 4,
      movelength: 1,
      //unitlen: 85,
      //autoscroll: 3000
    });
  }
  xSlider();

  /* 内容中间盒子轮播图插件slider */
  function lunBo() {
    $(".bannerInner").tyslide({
      boxh: 300, //盒子的高度
      w: 455, //盒子的宽度
      h: 300, //图片的高度
      isShow: false, //是否显示控制器
      isShowBtn: true, //是否显示左右按钮
      controltop: 30, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      controlsW: 55, //控制按钮宽度
      controlsH: 5, //控制按钮高度
      radius: 0, //控制按钮圆角度数
      controlsColor: "#9e97d7", //普通控制按钮的颜色
      controlsCurrentColor: "#fff", //当前控制按钮的颜色
      isShowNum: false, //是否显示数字
    });
  }
  lunBo();

  /* 内容右边盒子选项卡功能 */
  function pubTab(className) {
    // 1. 给事件源li注册鼠标移入事件
    $(`${className} ul li`).mouseover(function () {
      // 2. 当前li添加选中类名，其他li移除选中类名
      $(this).addClass("active").siblings().removeClass("active");
      // 3. 先全部的div滑入，再当前的div滑出（如果先当前滑出，其他兄弟再滑入的话会产生高度bug）
      let $divs = $($(`.pubcontent ${className} div`));
      $divs.stop(true).slideUp("fast");
      // 4. $(this).index()获取当前li的索引
      $($divs[$(this).index()]).stop(true).slideDown("fast");
    });
  }
  pubTab(".accessory");
  pubTab(".cloth");
  pubTab(".exquisite");
  pubTab(".home");

  /* 楼层跳跃 */
  function floorJump(className1, className2) {
    $(`#floor ${className1}`)
      // 1. 注册鼠标移入移出事件改变图标选中状态
      .hover(
        function () {
          // 2. 移入时添加类名并用动画改变宽度
          $(this).addClass("active").stop(true).animate({ width: 70 }, 200);
        },
        function () {
          // 3. 移出时删除类名并用动画改变宽度
          $(this).stop(true).animate({ width: 35 }, 0).removeClass("active");
        }
      )
      // 4. 注册点击事件实现楼层跳跃功能
      .click(function () {
        // 5. $('选择器').offset().top 获取对象到窗口顶部的距离（只能获取不能设置）
        let top = $(`${className2}`).offset().top - 88;
        $("html,body").stop(true).animate({ scrollTop: top }, 500);
      });
  }
  floorJump(".recFloor", "#recommend");
  floorJump(".accFloor", ".accessory");
  floorJump(".cloFloor", ".cloth");
  floorJump(".exqFloor", ".exquisite");
  floorJump(".homeFloor", ".home");
  floorJump(".btt", "#header");

  /* 固定头部搜索框功能 */
  // 1. 注册窗口滚动事件
  function fixedSearch() {
    $(window).scroll(function () {
      // 2. 获取滚动条的距离
      let scrollTop = $(this).scrollTop();
      // 3. 通过距离判断是否显示搜索框
      if (scrollTop > 1200) {
        // 4. 滑出
        $("#fixedSearch").slideDown("fast");
        // 5. 把旧头部搜索框添加到新头部中
        $(".hbottom .search").appendTo("#fixedSearch>div");
      } else {
        // 6. 滑入
        $("#fixedSearch").slideUp("fast");
        // 7. 把新头部搜索框添加到旧头部中
        $("#fixedSearch .search").prependTo(".hbottom .nav>div");
      }
    });
  }
  fixedSearch();
});
